<template>
	<view class="page-height">
		<i-top-bar title="首页" :leftArrow="false" :bgOpacity="0">
			<view class="" slot="right">
				<view class="msg-view" @click="openWin('/pages/user/msg')">
					<image src="@/static/images/msg.png" class="msg"></image>
					<view class="un-read" v-if="msg_count > 0"></view>
				</view>
			</view>
		</i-top-bar>
		<image src="@/static/images/home-bg.png" class="home-bg"></image>
		<view class="page-content">
			<image src="../../static/images/banner.png" mode="aspectFill" class="banner"></image>

			<view class="content-col">
				<text class="title">心喜阅售后流程：</text>
				<view class="list-view">
					<view class="line-color"></view>
					<view class="list">
						<view class="line">
							<view class="ioc"></view>
							<text class="text">用户提交售后工单</text>
						</view>
						<view class="line">
							<view class="ioc"></view>
							<text class="text">平台服务人员处理工单信息</text>
						</view>
						<view class="line">
							<view class="ioc"></view>
							<text class="text">用户寄出产品</text>
						</view>
						<view class="line">
							<view class="ioc"></view>
							<text class="text">工单信息流转至售后服务</text>
						</view>
						<view class="line">
							<view class="ioc"></view>
							<text class="text">完成售后服务并寄回产品</text>
						</view>
					</view>
				</view>
			</view>

			<view class="btn-view">
				<button class="btn" @click="openWin('/pages/order/rule')">提交售后工单</button>
				<!-- <button class="btn" @click="openWin('/pages/order/add-order')">提交售后工单</button> -->
			</view>


		</view>
		<i-tabbar :current="0"></i-tabbar>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	export default {
		data() {
			return {};
		},
		onShow() {
			this.getMsgCount()
		},

		computed: {
			msg_count: function() {
				return this.$store.state.msg_count
			}
		},

		methods: {
			getMsgCount() {
				this.api.post("/api/user/newssum").then(res => {
					this.$store.commit('setMsgCount',res.newssum)
					console.log(res.newssum);
				}).catch(err => {
					this.apiErr(err)
				}).finally(() => {
					this.loadingHide();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-height {
		background-color: #ffffff;
	}

	.home-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 436rpx;
	}

	.msg-view {
		position: relative;
		margin-right: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44rpx;
		height: 44rpx;

		.msg {
			width: 38rpx;
			height: 38rpx;
		}

		.un-read {
			position: absolute;
			display: block;
			top: 0;
			right: 0;
			width: 10rpx;
			height: 10rpx;
			border-radius: 10px;
			background-color: #ff2f4f;
		}
	}

	.page-content {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 1;
		padding: 30rpx;
	}

	.banner {
		width: 690rpx;
		height: 312rpx;
		border-radius: 10rpx;
	}

	.content-col {
		display: flex;
		flex-direction: column;
		margin-top: 70rpx;

		.title {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
		}

		.list-view {
			position: relative;
			display: flex;
			padding: 20rpx 0;

			.line-color {
				position: absolute;
				z-index: 1;
				left: 6rpx;
				top: 60rpx;
				bottom: 60rpx;
				width: 1px;
				background: #E6E6E6;
			}

			.list {
				position: relative;
				z-index: 2;
				display: flex;
				flex-direction: column;

				.line {
					display: flex;
					align-items: center;
					margin: 20rpx 0;

					.ioc {
						display: block;
						width: 14rpx;
						height: 14rpx;
						border: 4rpx solid #CCCCCC;
						border-radius: 100px;
						margin-right: 16rpx;
						background: #ffffff;
					}

					.text {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}



		}
	}

	.btn-view {
		margin: auto 0;
	}
</style>